<template>
  <div class="main">
    <div>
      <el-button type="primary" :loading="bindLoading" @click="goBindTelegram">
        跳转绑定链接
      </el-button>
      <el-button
        type="primary"
        :loading="unBindLoading"
        @click="goUnBindTelegram"
      >
        跳转解绑链接
      </el-button>
    </div>
    <el-descriptions
      v-loading="detailsLoading"
      direction="vertical"
      :column="2"
      border
    >
      <template #title>
        绑定详情
        <el-button
          type="success"
          :icon="Refresh"
          text
          @click="getBindDetails"
        />
      </template>
      <el-descriptions-item
        label="绑定账号"
        label-align="center"
        align="center"
      >
        {{ info.telegramUsername || "--" }}
      </el-descriptions-item>
      <el-descriptions-item
        label="绑定用户名"
        label-align="center"
        align="center"
      >
        {{ info.telegramName || "--" }}
      </el-descriptions-item>
      <el-descriptions-item
        label="绑定状态"
        label-align="center"
        align="center"
      >
        {{ info.statusDescription || "--" }}
      </el-descriptions-item>
      <el-descriptions-item
        label="通知级别"
        label-align="center"
        align="center"
      >
        <div
          v-if="info.notificationSettings"
          class="flex items-center justify-center gap-2"
        >
          <span
            >通知级别:
            <el-button type="primary" text bg>
              {{ info.notificationSettings.levelDesc }}
            </el-button>
          </span>
          <span
            >文件接收设置:
            <el-button
              :type="
                info.notificationSettings.receiveFiles ? 'success' : 'danger'
              "
              text
              bg
            >
              {{ info.notificationSettings.receiveFiles ? "接收" : "拒绝" }}
            </el-button></span
          >
        </div>
        <span v-else>--</span>
      </el-descriptions-item>
    </el-descriptions>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from "vue";
import { Refresh } from "@element-plus/icons-vue";
import {
  getTelegramBindLink,
  getTelegramUnbindLink,
  getTelegramBindDetails
} from "@/api/userTelegramApi";
import { message } from "@/utils/message";
type SetType = {
  levelDesc: string;
  receiveFiles: boolean;
};
type Info = {
  telegramUsername: string;
  telegramName: string;
  statusDescription: string;
  notificationSettings: SetType;
};
const info = ref<Info>({
  telegramUsername: "",
  telegramName: "",
  statusDescription: "",
  notificationSettings: {
    levelDesc: "",
    receiveFiles: false
  }
});
const bindLoading = ref(false);
const goBindTelegram = async () => {
  try {
    bindLoading.value = true;
    const { data } = await getTelegramBindLink();
    if (data?.bindLink) {
      window.open(data.bindLink, "_blank");
    }
  } catch (error) {
    console.log(error);
  } finally {
    bindLoading.value = false;
  }
};
const unBindLoading = ref(false);
const goUnBindTelegram = async () => {
  try {
    unBindLoading.value = true;
    const { message: text } = await getTelegramUnbindLink();
    message(text || "解绑成功", {
      type: "success"
    });
  } catch (error) {
    console.log(error);
  } finally {
    unBindLoading.value = false;
  }
};
const detailsLoading = ref(false);
const getBindDetails = async () => {
  try {
    detailsLoading.value = true;
    const { data } = await getTelegramBindDetails();
    info.value = data;
  } catch (error) {
    console.log(error);
  } finally {
    detailsLoading.value = false;
  }
};
onMounted(() => {
  getBindDetails();
});
</script>
<style lang="scss" scoped>
.main {
  padding: 20px;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
</style>
